<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">
{% load static %}
<head>
    <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 网站标题 -->
    <title>文章详情</title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <!--详情页面导入-->
    <script src="ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js"></script>
    <link rel="stylesheet" href="{% static 'prism/prism.css' %}">
    <!--导入css-->
    <link rel="stylesheet" href="{% static 'common/common.css' %}">
    <link rel="stylesheet" href="{% static 'common/jquery.pagination.css' %}">
    <!-- 引入vuejs -->
    <script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <style>
        #app > nav{
            padding-left: 8%;
            padding-right: 8%;
            align-items: center;
        }
        #app > nav > div.container{
            flex: 4;
            display:flex;
        }
        #app > nav > div.navbar-collapse{
            flex: 1;
            display:flex;
            justify-content:center;
        }
    </style>
</head>

<body>
<div id="app">
<!-- 定义导航栏 -->
{% include 'nav_base.html' %}
<!-- content -->
<div class="container">
    <div class="row">
        <!--文章详情-->
        <div class="col-9">
            <!-- 标题及作者 -->
            <h1 class="mt-4 mb-4">{{article.title}}</h1>
            <div class="alert alert-success"><div>作者：<span>{{article.author.username}}</span></div><div>浏览：{{article.total_views}}</div></div>
            <!-- 文章正文 -->
            <div class="col-12" style="word-break: break-all;word-wrap: break-word;">
                <p><p>{{article.content|safe}}</p></p>
            </div>
            <br>
            <!-- 发表评论 -->
            <hr>
            <br>
            {% if user.is_authenticated %}
                <div>
                    <form method="POST">
                    {% csrf_token %}
                    <input type="hidden" name="id" value="{{article.id}}" />
                    <div class="form-group"><label for="body"><strong>我也要发言：</strong></label>
                        <div>

                            <div class="django-ckeditor-widget" data-field-id="id_body" style="display: inline-block;">
                                <textarea cols="40" id="id_body" name="content" rows="10" required data-processed="0" :data-config="data_config" data-external-plugin-resources="[]" data-id="id_body" data-type="ckeditortype">

                                </textarea>
                            </div>
                        </div>
                    </div>
                        <!-- 提交按钮 -->
                        <button type="submit" class="btn btn-primary ">发送</button>
                    </form>
                </div>
            {% else %}
                <h5 class="row justify-content-center" v-show="!is_login">请<a href="{% url 'user:login' %}">登录</a>后回复</h5>
            {% endif %}
            <br>
            <!-- 显示评论 -->
            <h4>共有{{comment_total}}条评论</h4>
            <div class="row">
                {% for comment in comments %}
                    <div class="col-12" >
                        <hr><p><strong style="color: pink"></strong></p>
                        <div>
                            <div><span><strong>{{comment.user.username}}</strong></span>&nbsp;<span style="color: gray">{{comment.comment_time|date:'Y-m-d H:i'}}</span></div>
                            <br>
                            <p>{{comment.content|safe}}</p>
                        </div>
                    </div>
                {% endfor %}
                <div class="pagenation" style="text-align: center">
                        <div id="pagination" class="page"></div>
                </div>
            </div> 

        </div>
        <!-- 推荐 -->
        <div class="col-3 mt-4" id="sidebar" class="sidebar">
            <div class="sidebar__inner">
                    <h4><strong>推荐</strong></h4>
                    <hr>
                    {% for article in recommend_article %}
                        <a href="{% url 'home:detail' %}?id={{article.id}}" style="color: black">{{article.title}}</a><br>
                    {% endfor %}
            </div>
        </div>
    </div>
</div>


<!-- Footer -->
<footer class="py-3 bg-dark" id="footer">
    <div class="container">
        <h5 class="m-0 text-center text-white">Copyright @ qiruihua</h5>
    </div>
</footer>
</div>

<!--ckeditor-->
<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}" data-ckeditor-basepath="{% static 'ckeditor/ckeditor/' %}" id="ckeditor-init-script"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
<!-- 引入js -->
<script type="text/javascript" src="{% static 'js/host.js' %}"></script>
<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
<script type="text/javascript" src="{% static 'js/detail.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.pagination.min.js' %}"></script>
<script type="text/javascript">
    $(function () {
        $('#pagination').pagination({
            currentPage:{{page_num}},
            totalPage: {{total_page}},
            callback:function (current) {

                location.href = '/index/detail/?id={{article.id}}&page_size={{page_size}}&page_num='+current;
            }
        })
    });
</script>
</body>

</html>